@charset "UTF-8";
@media only screen and (width: 280px) { html { font-size: 11.2px; } }

@media only screen and (width: 320px) { html { font-size: 12.8px; } }

@media only screen and (width: 360px) { html { font-size: 14.4px; } }

@media only screen and (width: 375px) { html { font-size: 15px; } }

@media only screen and (width: 400px) { html { font-size: 16px; } }

@media only screen and (width: 412px) { html { font-size: 16.48px; } }

@media only screen and (width: 414px) { html { font-size: 16.56px; } }

@media only screen and (width: 600px) { html { font-size: 24px; } }

@media only screen and (width: 720px) { html { font-size: 28.8px; } }

@media only screen and (width: 749px) { html { font-size: 29.96px; } }

@media only screen and (width: 750px) { html { font-size: 30px; } }

@media only screen and (min-width: 1000px) { html { font-size: 20px; } }

body{background-color:#eee}

h1{margin:0;padding:0;text-align:center;font-weight:lighter;font-size:1.29em}

.info{color:#999;text-align:right;font-size:.74em}

#app{box-sizing:border-box;margin:0 auto;padding:.53em;width:90%;background-color:#fff}

.done{color:#ccc;text-decoration:line-through}

.delete{float:right;height:1.7em;border:0;border-radius:2px;background-color:tomato;color:#fff;font-size:.74em}

a{color:#1e90ff;text-decoration:none}

a:hover{text-decoration:underline}

a,button, label{cursor:pointer}

.controll{position:relative}

input[type=text]{display:block;width:95%;margin:0 auto;padding:0 .51em;height:1.8em;font-size:.74em}

footer{padding-top:.7em;color:#666;text-align:center;font-size:.74em}

.empty{color:#999;text-align:center;font-size:.74em}

.todos{padding:0;list-style:none}

span{display:inline-block;margin-left:.46em;font-size:.86em}

.todos li{position:relative;padding:.2em .43em}

label{position:relative;top:2.5em;color:dodgerblue;text-align:left;font-size:.74em}

label:hover { text-decoration: underline; }

#togAll{display:none}
